<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back();"></div>
      <div class="name">{{tt}}</div>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>

    <div class="nav-tab">
    	<div class="tt">
    		<span class="active">起点24小时热搜榜</span>
    	</div>
    </div>
    <div class="book-list"
        v-infinite-scroll="loadBottom"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10">
    	<router-link :to="{path:'/bookdetails/'+item.id}" v-for="item in list">
            <div class="layout1-box">
              <img :src="item.cover ? item.cover : errorBookDefaultImg" class="item-l" :onerror="errorBookDefaultImg">
              <div class="item-r">
                  <h3 class="item-tt">{{item.title}}</h3>
                  <p class="item-desc">{{item.intro}}</p>
                  <p class="item-info">
                    <span>{{item.author}}</span>
                    <span class="label">
                       <i class="blue" v-for="label in item.label">{{label}}</i>
                       <i class="green">标签</i>
                    </span>
                  </p>
              </div>
            </div>
        </router-link>
    </div>
    <div class="loadmore-down">
        <span>{{loadNoData ?'暂无更多数据了!' : '加载中...'}}</span>
    </div>
    <!-- 底部 -->
    <web-footer active="position"></web-footer>
  </div>
</template>
<script>
	import bookDefaultImg from '@/assets/images/book.png';
	import WebFooter from '../PUBLIC/footer.vue';
    export default {
    	name: 'totalRanking',
    	components: {
    		WebFooter
	    },
    	data () {
      		return {
      			list:[],
      			tt:'',
                page:0,
                loading:false,
                loadNoData:false,
            errorBookDefaultImg:'this.src="' + bookDefaultImg + '"',
	      	}
	    },
		created(){

	    },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
	        menuToggle(){
	            this.menuShow = !this.menuShow;
	        },
            loadBottom(){
                this.loading = true;
                this.$axios.post(
                    this.$store.state.url+"rank_novel_list?device_sn="+this.$store.state.device,
                    {device_sn:this.$store.state.device,id:this.$route.params.id,offset:this.list.length,limit:5}).then(res=>{
                      this.tt = res.data.rank_name;
                      this.list = this.list.concat(res.data.list);
                      if(res.data.list.length>=5){
                          console.log(res.data);
                          this.loading = false;
                          ++this.page;
                        }else{
                          this.loadNoData = true;
                        }
                });
            }
	    }
  	}
</script>
<style lang="scss" scoped>
	.book-list{
		padding:30px 30px 20px;
		a{
			display: block;
			margin-bottom:50px;
		}
        a:last-child{
            margin-bottom:0;
        }
	}
	.nav-tab{
		padding:0 30px;
		.tt{
			line-height:95px;
			font-size:28px;
			span{
				position: relative;
				margin-right:50px;
				display: inline-block;
			}
			.active{
				color:#3471ff;
				&:after{
					content:'';
					position: absolute;
					bottom:10px;
					left:0;
					width:40px;
					height:5px;
					display: block;
					background-color:#3471ff;
				}	
			}
		}
	}
</style>
